{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/panel/macro.njk" import govukPanel %}
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
{% from "govuk/components/label/macro.njk" import govukLabel %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/select/macro.njk" import govukSelect %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}

{% extends "layouts/examples.njk" %}

{% block styles %}
<style>
  .app-u-w-full {
    width: 100%;
  }

  .app-u-w-half {
    width: 50%;
    float: left;
  }

  .app-u-w-third {
    width: 33.33333333%;
    float: left;
  }

  .app-u-w-quarter {
    width: 25%;
    float: left;
  }

  .app-u-w-two-thirds {
    width: 66.66666667%;
    float: left;
  }
</style>
{% endblock %}

{% block beforeContent %}
  {{ govukBackLink({
    href: "/"
  }) }}
{% endblock %}

{% block content %}
  <h1 class="govuk-heading-xl">Form elements alignment</h1>
  <h2 class="govuk-heading-m">Input and button</h2>

  <form action="/" method="post">
    {% call govukFieldset() %}
      {{ govukLabel({
        "text": "National Insurance number",
        "for": "govuk-input-a"
      }) }}
      <div class="app-u-w-half">
        {{ govukInput({
          id: "govuk-input-a",
          name: "national-insurance-number"
        }) }}
      </div>
      <div class="app-u-w-half">
        {{ govukButton({
          "text": "Save and continue"
        }) }}
      </div>
    {%- endcall %}
  </form>

  <h2 class="govuk-heading-m">Select and button</h2>

  <form action="/" method="post">
    {% call govukFieldset() %}
      {{ govukLabel({
        "text": "This is the label text",
        "for": "select-box"
      }) }}
      <div class="app-u-w-half">
        {{ govukSelect({
          "id": "select-box",
          "name": "select-box",
          "items": [
            {
              "value": 1,
              "text": "GOV.UK elements option 1"
            },
            {
              "value": 2,
              "text": "GOV.UK elements option 2"
            },
            {
              "value": 3,
              "text": "GOV.UK elements option 3"
            }
          ]
        }) }}
      </div>
      <div class="app-u-w-half">
        {{ govukButton({
          "text": "Save and continue"
        }) }}
      </div>
    {%- endcall %}
  </form>

  <h2 class="govuk-heading-m">Input and select</h2>

  <form action="/" method="post">
    {% call govukFieldset() %}
      <div class="app-u-w-half">
          {{ govukInput({
            id: "input-and-select__text-input",
            label: {
              "text": "NIC"
            }
          }) }}
      </div>
      <div class="app-u-w-half">
        {{ govukSelect({
          "label": {
            "text": "Select class"
          },
          "id": "select-input-and-select",
          "name": "select-input-and-select",
          "items": [
            {
              "value": 1,
              "text": "NIC 1"
            },
            {
              "value": 2,
              "text": "NIC 2"
            },
            {
              "value": 3,
              "text": "NIC 3"
            }
          ]
        }) }}
      </div>
    {%- endcall %}
  </form>

  <h2 class="govuk-heading-m">Input and checkboxes</h2>

  <form action="/" method="post">
    {% call govukFieldset() %}
      {{ govukLabel({
        "text": "NIC",
        "for": "input-and-checkboxes__text-input"
      }) }}
      <div class="app-u-w-half">
          {{ govukInput({
            id: "input-and-checkboxes__text-input"
          }) }}
      </div>
      <div class="app-u-w-half">
        {{ govukCheckboxes({
          "idPrefix": "checkboxes-year",
          "name": "checkboxes-year",
          "items": [
            {
              "value": "2017-2018",
              "text": "2017 / 2018"
            }
          ]
        }) }}
      </div>
    {%- endcall %}
  </form>

  <h2 class="govuk-heading-m">Input and radios</h2>

  <form action="/" method="post">
    {% call govukFieldset() %}
      {{ govukLabel({
        "text": "NIC",
        "for": "input-and-radios__text-input"
      }) }}
      <div class="app-u-w-half">
          {{ govukInput({
            id: "input-and-radios__text-input"
          }) }}
      </div>
      <div class="app-u-w-half">
        {{ govukRadios({
          "idPrefix": "radio",
          "name": "radio-group",
          "items": [
            {
              "value": "na",
              "text": "Not applicable"
            }
          ]
        }) }}
      </div>
    {%- endcall %}
  </form>

  <h2 class="govuk-heading-m">Radios, checkboxes and button</h2>
  <form action="/" method="post">
    {% call govukFieldset() %}
      <div class="app-u-w-quarter">
        {{ govukCheckboxes({
          "idPrefix": "radio-checkboxes-button__checkboxes",
          "name": "radio-checkboxes-button__checkboxes",
          "items": [
            {
              "value": "2017-2018",
              "text": "2017 / 2018"
            }
          ]
        }) }}
      </div>
      <div class="app-u-w-quarter">
        {{ govukRadios({
          "idPrefix": "radio-checkboxes-button__radios",
          "name": "radio-group",
          "items": [
            {
              "value": "na",
              "text": "Not applicable"
            }
          ]
        }) }}
      </div>
      <div class="app-u-w-half">
        {{ govukButton({
          "text": "Save and continue"
        }) }}
      </div>
    {%- endcall %}
  </form>

  <h2 class="govuk-heading-m">Input with govuk-!-width</h2>

  {% call govukFieldset() %}
    {{ govukInput({
      id: "govuk-!-width-one-quarter",
      classes: "govuk-!-width-one-quarter",
      label: {
        text: "Input with govuk-!-width-one-quarter (25% width)"
      }
    }) }}
    {{ govukInput({
      id: "govuk-!-width-one-third",
      classes: "govuk-!-width-one-third",
      label: {
        text: "Input with govuk-!-width-one-third (33% width)"
      }
    }) }}
    {{ govukInput({
      id: "govuk-!-width-one-half",
      classes: "govuk-!-width-one-half",
      label: {
        text: "Input with govuk-!-width-one-half (50% width)"
      }
    }) }}
    {{ govukInput({
      id: "govuk-!-width-two-thirds",
      classes: "govuk-!-width-two-thirds",
      label: {
        text: "Input with govuk-!-width-two-thirds (66% width)"
      }
    }) }}
    {{ govukInput({
      id: "govuk-!-width-three-quarters",
      classes: "govuk-!-width-three-quarters",
      label: {
        text: "Input with govuk-!-width-width-three-quarters (75% width)"
      }
    }) }}
  {%- endcall %}

  <h2 class="govuk-heading-m">Display with govuk-!-display</h2>

  <h3 class="govuk-heading-s govuk-!-font-weight-regular">govuk-!-display-block</h3>

  {{ govukButton({
    classes: 'govuk-!-display-block',
    text:'Save and continue',
    element: 'input',
    href: '/'
  }) }}

  {{ govukButton({
    classes: 'govuk-!-display-block',
    text:'Save and continue',
    element: 'input',
    href: '/'
  }) }}

  <h3 class="govuk-heading-s govuk-!-font-weight-regular">govuk-!-display-inline-block</h3>

    {{ govukPanel({
      classes: 'govuk-!-display-inline-block',
      titleText: 'Application complete',
      html: 'Your reference number<br><strong>HDJ2123F</strong>'
    }) }}


    {{ govukButton({
      classes: 'govuk-!-display-inline-block',
      text:'Save and continue',
      element: 'input',
      href: '/' })
    }}

  <h3 class="govuk-heading-s govuk-!-font-weight-regular">govuk-!-display-inline</h3>

  <a class="govuk-!-display-inline govuk-link" href="#">Apples</a>
  <a class="govuk-!-display-inline govuk-link" href="#">Oranges</a>
{% endblock %}
